<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css//magnific-popup.css">
    <link rel="stylesheet" href="./css/icon.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>Document</title>
</head>

<body>
    <!-- 预加载动画 -->
    <div class="preloader">
        <div class="spinner"></div>
    </div>
    <!-- 首页 -->
    <div id="home">
        <div class="cover"></div>
        <div class="container  animated fadeInUp wow" data-wow-delay="0.6s">
            <h1 data-wow-delay="0.6s">
                舌尖上的中国
            </h1>
            <a href="#introduction" data-wow-delay="0.6s">一起去品味吧！</a>
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="sticky-nav" class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#home" class="navbar-brand">舌尖上的中国</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="#introduction">菜系介绍</a>
                </li>
                <li>
                    <a href="#menu">菜系菜单</a>
                </li>
                <li>
                    <a href="#imagelist">菜品案例</a>
                </li>
                <li>
                    <a href="#about">关于我</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 菜系介绍 -->
    <div id="introduction">
        <!-- 轮播（Carousel）项目 -->
        <div id="myCarousel" class="carousel slide wow fadeInUp" data-wow-delay="0.6s">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="./image/introduction-chuan.png" alt="First slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">川菜</div>
                        <div class="col-md-10 item-title-content">川菜是中国最有特色的菜系，也是民间最大菜系。川菜素来享有“一菜一格，百菜百味”的声誉。 川菜在烹调方法上，有炒、煎、干烧、炸、熏、泡、炖、焖、烩、贴、爆等38种之多。在口味上特别讲究色、香、味、形，兼有南北之长，以味的多、广、厚著称。
                            历来有“七味”、“八滋”之说。平时食欲不好的人非常适合吃一些川菜，微辣的复合味有助于促进唾液分泌，增进食欲。需要提醒大家的是，川菜一般麻辣口味较重，普通人吃多了可能会肠胃不适。 因此，辣菜最好和一些清淡的菜肴搭配着吃。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-lu.png" alt="Second slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">鲁菜</div>
                        <div class="col-md-10 item-title-content">鲁菜起源于山东的齐鲁风味，是中国传统四大菜系（也是八大菜系）中唯一的自发型菜系（相对于淮扬、川、粤等影响型菜系而言），是历史最悠久、技法最丰富、难度最高、最见功力的菜系。 特点是清香、鲜嫩、味醇而著名，十分讲究清汤和奶汤的调制，清汤色清而鲜，奶汤色白而醇。烟台福山为胶东菜发源地。以烹制各种海鲜而驰名，口味清淡。济南历城为济南菜发源地。擅长爆、烧、炸、炒，口味偏重。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-yue.png" alt="Third slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">粤菜</div>
                        <div class="col-md-10 item-title-content">粤菜即广东菜，发源于岭南。由广州菜（也称广府菜）、潮州菜（也称潮汕菜）、东江菜（也称客家菜）三种地方风味组成，三种风味各具特色 。是起步较晚的菜系，但它影响深远，世界各国的中菜馆，多数是以粤菜为主，在世界各地粤菜与法国大餐齐名，国外的中餐基本上都是粤菜。因此有不少人，认为粤菜是海外中国的代表菜系。
                            粤菜特点是丰富精细的选材和清淡的口味。粤菜可选原料多，自然也就精细。粤菜讲究原料的季节性，“不时不吃”。吃鱼，有“春鳊秋鲤夏三犁（鲥鱼）隆冬鲈”；吃蛇，则是“秋风起三蛇肥，此时食蛇好福气”；吃虾，“清明虾，最肥美”；吃蔬菜要挑“时菜”，是指合季节的蔬菜，如菜心为“北风起菜心最甜”。除了选原料的最佳肥美期之外，粤菜还特别注意选择原料的最佳部位
                            。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-huaiyang.png" alt="Third slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">淮扬菜</div>
                        <div class="col-md-10 item-title-content">即江苏菜系。江苏菜系在烹饪学术上一般称为“苏菜”，由南京、徐海、淮扬和苏南四种风味江组成，是宫廷第二大菜系，今天国宴仍以淮扬菜系为主。 江苏菜系选料讲究，刀工精细，口味偏甜，造型讲究，特色鲜明。由于江浙地区气候潮湿，又靠近沿海，所以往往会在菜中增加糖分，来去除湿气。江苏菜很少放辣椒，因为吃辣椒虽然能够去除湿气，但是容易上火。因此，江浙菜系是以偏甜为主。苏菜风格源于宋代开封，宋室南迁带入并逐渐占据主要地位。今天开封饮食仍然与江苏有诸多相同之处，如小笼包、桂鱼等等。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-zhe.jpg" alt="Third slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">浙菜</div>
                        <div class="col-md-10 item-title-content">浙江地处中国东海之滨，素称鱼米之乡，特产丰富，盛产山珍海味和各种鱼类。浙菜是以杭州、宁波、绍兴和温州四种风味为代表的地方菜系。浙菜采用原料十分广泛，注重原料的新鲜、合理搭配，以求味道的互补，充分发掘出普通原料的美味与营养。
                            特别是杭菜中的湖上帮和山里帮两大风味技术体系，都强调原料鲜嫩，现取现做。还有不少水中和山地植物富含多种营养成分，对身体健康十分有益。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-min.jpg" alt="Third slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">闽菜</div>
                        <div class="col-md-10 item-title-content">川闽菜是以闽东、闽南、闽西、闽北、闽中、莆仙地方风味菜为主形成的菜系。以闽东和闽南风味为代表。 闽菜清鲜，淡爽，偏于甜酸。尤其讲究调汤，汤鲜、味美，汤菜品种多，具有传统特色。闽东菜有“福州菜飘香四海，食文化千古流传”之称，有以下鲜明特征：一为刀工巧妙，寓趣于味；二为汤菜众多，变化无穷；三为调味奇特，别是一方。
                            闽菜最突出的烹调方法有醉、扣、糟等，其中最具特色的是糟，有炝糟、醉糟等。闽菜中常使用的红糟，由糯米经红曲发酵而成，糟香浓郁、色泽鲜红。糟味调料本身也具有很好的去腥臊、健脾肾、消暑火的作用，非常适合在夏天食用。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-xiang.jpg" alt="Third slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">湘菜</div>
                        <div class="col-md-10 item-title-content">湘菜是中国历史悠久的一个地方风味菜。湘菜特别讲究调味，尤重酸辣、咸香、清香、浓鲜。夏天炎热，其味重清淡、香鲜。冬天湿冷，味重热辣、浓鲜。 湘菜调味，特色是“酸辣”，以辣为主，酸寓其中。“酸”是酸泡菜之酸，比醋更为醇厚柔和。湖南大部分地区地势较低，气候温暖潮湿，古称“卑湿之地”。而辣椒有提热、开胃、祛湿、祛风之效，故深为湖南人民所喜爱。剁椒经过乳酸发酵，具有开胃、养胃的作用。
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/introduction-hui.png" alt="Third slide">
                    <div class="item-title">
                        <div class="col-md-2 item-title-head">徽菜</div>
                        <div class="col-md-10 item-title-content">徽菜起源于安徽省徽州地区，是中国八大菜系之一。 徽菜起源于南宋时期的徽州府(现黄山市，江西省婺源县，以及安徽省宣城市绩溪县组成)，徽菜是古徽州的地方特色，其独特的地理人文环境赋予徽菜独有的味道，由于明清徽商的崛起，这种地方风味逐渐进入市肆，流传于苏、浙、赣、闽、沪、鄂以至长江中、下游区域，具有广泛的影响，明清时期一度居于八大菜系之首。根据2009年出版的中国徽菜标准，正式确定徽菜为皖南菜、皖江菜、合肥菜、淮南菜、皖北菜五大风味，沿江菜、沿淮菜、皖南菜的总称。
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- 菜品菜单 -->
    <div id="menu" class="wow fadeInUp" data-wow-delay="0.5s">
        <div class="container parent-container wow fadeInUp" data-wow-delay="0.6s">
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-1" class="menu-popup-link">
                    <img src="./image/menu-chuan.jpg" alt="">
                    <p>川菜</p>
                </a>
                <div id="menu-popup-1" class="mfp-hide menu-popup-item-content">
                    <p>川菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>东坡肘子</li>
                        <li>冷锅鱼</li>
                        <li>卤鸭子</li>
                        <li>鱼香肉丝</li>
                        <li>麻婆豆腐</li>
                        <li>夫妻肺片</li>
                        <li>回锅肉</li>
                        <li>毛血旺</li>
                        <li>酸菜鱼</li>
                        <li>重庆火锅</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-2" class="menu-popup-link">
                    <img src="./image/menu-lu.jpg" alt="">
                    <p>鲁菜</p>
                </a>
                <div id="menu-popup-2" class="mfp-hide menu-popup-item-content">
                    <p>鲁菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>糖醋鲤鱼</li>
                        <li>芙蓉鸡片</li>
                        <li>葱烧海参</li>
                        <li>九转大肠</li>
                        <li>汤爆双脆</li>
                        <li>蝴蝶海参</li>
                        <li>乌鱼蛋汤</li>
                        <li>德州扒鸡</li>
                        <li>奶汤蒲菜</li>
                        <li>孔府一品锅</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-3" class="menu-popup-link">
                    <img src="./image/menu-yue.jpg" alt="">
                    <p>粤菜</p>
                </a>
                <div id="menu-popup-3" class="mfp-hide menu-popup-item-content">
                    <p>粤菜</p>
                    <ul class="menu-popup-list">
                        <li>白切贵妃鸡</li>
                        <li>烧鹅</li>
                        <li>蜜汁叉烧</li>
                        <li>蚝皇凤爪</li>
                        <li>百花鱼肚</li>
                        <li>软太极虾</li>
                        <li>什锦冬瓜帽</li>
                        <li>雄鹰展翅</li>
                        <li>罗汉斋</li>
                        <li>煲仔饭</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-4" class="menu-popup-link">
                    <img src="./image/menu-su.jpg" alt="">
                    <p>苏菜</p>
                </a>
                <div id="menu-popup-4" class="mfp-hide menu-popup-item-content">
                    <p>苏菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>清炖蟹粉狮子头</li>
                        <li>文思豆腐</li>
                        <li>平桥豆腐羹</li>
                        <li>大煮干丝</li>
                        <li>松仁玉米</li>
                        <li>松鼠桂鱼</li>
                        <li>扬州炒饭</li>
                        <li>红烧狮子头</li>
                        <li>鱼米之乡</li>
                        <li>香菇油菜</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-5" class="menu-popup-link">
                    <img src="./image/menu-zhe.jpg" alt="">
                    <p>浙菜</p>
                </a>
                <div id="menu-popup-5" class="mfp-hide menu-popup-item-content">
                    <p>浙菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>东坡肉</li>
                        <li>西湖醋鱼</li>
                        <li>叫花鸡</li>
                        <li>西湖牛肉羹</li>
                        <li>油爆大虾</li>
                        <li>油焖春笋</li>
                        <li>腌笃鲜</li>
                        <li>花菇石鸡</li>
                        <li>江南卤鸭</li>
                        <li>酥牛肉</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-6" class="menu-popup-link">
                    <img src="./image/menu-min.jpg" alt="">
                    <p>闽菜</p>
                </a>
                <div id="menu-popup-6" class="mfp-hide menu-popup-item-content">
                    <p>闽菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>佛跳墙</li>
                        <li>海蛎煎</li>
                        <li>福建扁肉</li>
                        <li>炒棵条</li>
                        <li>醉排骨</li>
                        <li>西施舌芙蓉蛋</li>
                        <li>荔枝肉</li>
                        <li>扳指干贝</li>
                        <li>福州肉燕</li>
                        <li>盐水虾</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-7" class="menu-popup-link">
                    <img src="./image/menu-xiang.jpg" alt="">
                    <p>湘菜</p>
                </a>
                <div id="menu-popup-7" class="mfp-hide menu-popup-item-content">
                    <p>湘菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>祖庵鱼翅</li>
                        <li>全家福</li>
                        <li>百鸟朝凤</li>
                        <li>子龙脱袍</li>
                        <li>霸王别姬</li>
                        <li>三层套鸡</li>
                        <li>花菇无黄蛋</li>
                        <li>牛中三杰</li>
                        <li>剁椒鱼头</li>
                        <li>麻仁香酥鸭</li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 menu-popup-item">
                <a href="#menu-popup-8" class="menu-popup-link">
                    <img src="./image/menu-hui.jpg" alt="">
                    <p>徽菜</p>
                </a>
                <div id="menu-popup-8" class="mfp-hide menu-popup-item-content">
                    <p>徽菜招牌菜</p>
                    <ul class="menu-popup-list">
                        <li>徽式红烧肉</li>
                        <li>徽州豆黄稞</li>
                        <li>臭鳜鱼</li>
                        <li>清蒸石鸡</li>
                        <li>问政山笋</li>
                        <li>霉豆渣</li>
                        <li>麻辣小龙虾</li>
                        <li>红烧扒皮鱼</li>
                        <li>拔丝芋头</li>
                        <li>双爆串飞</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <!-- 菜品画廊 -->
    <div id="imagelist">
        <div class="container">
            <div id="filters" class="wow fadeInUp" data-wow-delay="0.6s" >
                <a href="" class="filters-item col-sm-3 col-xs-3 selected" data-filter="*">所有菜品</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".chuan">川菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".lu">鲁菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".yue">粤菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".su">苏菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".zhe">浙菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".min">闽菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".xiang">湘菜</a>
                <a href="" class="filters-item col-sm-1 col-xs-3" data-filter=".hui">徽菜</a>
            </div>
            <div class="isotope wow fadeInUp" data-wow-delay="1s">
                <div class="imagelist-item chuan col-sm-3 col-xs-6">
                    <a href="./image/imagelist-chuan-1.jpg">
                        <img src="./image/imagelist-chuan-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item chuan col-sm-3 col-xs-6">
                    <a href="./image/imagelist-chuan-2.jpg">
                        <img src="./image/imagelist-chuan-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item lu col-sm-3 col-xs-6">
                    <a href="./image/imagelist-lu-1.jpg">
                        <img src="./image/imagelist-lu-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item lu col-sm-3 col-xs-6">
                    <a href="./image/imagelist-lu-2.jpg">
                        <img src="./image/imagelist-lu-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item yue col-sm-3 col-xs-6">
                    <a href="./image/imagelist-yue-1.jpg">
                        <img src="./image/imagelist-yue-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item yue col-sm-3 col-xs-6">
                    <a href="./image/imagelist-yue-2.jpg">
                        <img src="./image/imagelist-yue-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item su col-sm-3 col-xs-6">
                    <a href="./image/imagelist-su-1.jpg">
                        <img src="./image/imagelist-su-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item su col-sm-3 col-xs-6">
                    <a href="./image/imagelist-su-2.jpg">
                        <img src="./image/imagelist-su-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item zhe col-sm-3 col-xs-6">
                    <a href="./image/imagelist-zhe-1.jpg">
                        <img src="./image/imagelist-zhe-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item zhe col-sm-3 col-xs-6">
                    <a href="./image/imagelist-zhe-2.jpg">
                        <img src="./image/imagelist-zhe-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item min col-sm-3 col-xs-6">
                    <a href="./image/imagelist-min-1.jpg">
                        <img src="./image/imagelist-min-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item min col-sm-3 col-xs-6">
                    <a href="./image/imagelist-min-2.jpg">
                        <img src="./image/imagelist-min-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item xiang col-sm-3 col-xs-6">
                    <a href="./image/imagelist-xiang-1.jpg">
                        <img src="./image/imagelist-xiang-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item xiang col-sm-3 col-xs-6">
                    <a href="./image/imagelist-xiang-2.jpg">
                        <img src="./image/imagelist-xiang-2.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item hui col-sm-3 col-xs-6">
                    <a href="./image/imagelist-hui-1.jpg">
                        <img src="./image/imagelist-hui-1.jpg" alt="">
                    </a>
                </div>
                <div class="imagelist-item hui col-sm-3 col-xs-6">
                    <a href="./image/imagelist-hui-2.jpg">
                        <img src="./image/imagelist-hui-2.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 关于我 -->
    <div id="about">
        <p class="author wow fadeInUp" data-wow-delay="0.6s">Designed by yangf.</p>
        <div class="contact wow fadeInUp" data-wow-delay="1s" >
            <div class="github mobile-click">
                <a href="https://github.com/qq79952008" title="github" target="_blank">
                    <span class="icon-github-fill"></span>
                </a>
            </div>
            <div class="mail">
                <span class="icon-mail"></span>
                <div class="mail-hide">
                    <span class="triangle-top"></span>
                    <p>79952008@qq.com</p>
                </div>
            </div>
            <div class="qq">
                <span class="icon-QQ"></span>
                <div class="qq-hide">
                    <span class="triangle-right"></span>
                    <img src="./image//qq.png" alt="qq">
                </div>
            </div>
    
        </div>
    </div>
    <script src="./js/jquery-3.3.1.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <!--画廊弹出层插件  -->
    <script src="./js/jquery.magnific-popup.min.js"></script>
    <!-- 背景图片轮播插件 -->
    <script src="./js/jquery.backstretch.js"></script>
    <!-- 固定内容插件 -->
    <script src="./js/jquery.sticky.js"></script>
    <!-- 瀑布流筛选插件 -->
    <script src="./js/isotope.pkgd.min.js"></script>
    <!-- 平滑滚动插件 -->
    <script src="./js/jquery.smooth-scroll.js"></script>
    <!-- 图片加载插件 -->
    <script src="./js//imagesloaded.pkgd.min.js"></script>
    <!-- wow滚动显示插件 -->
    <script src="./js/wow.min.js"></script>

    <script src="./js/index.js"></script>
</body>

</html>